Creating a launcher icon with Inkscape template 2

Scale the background

The layer with your background graphic is underneath the layer DO NOT EDIT - Cut Away Shape so that the "Cut Away Shape" applies the correct shape to your individual background. Make sure that your graphic is smaller than the canvas, but larger than the masking shape area (bigger than 50 x 50 pixels) to avoid flat, distorted edges; your final icon should be a smooth squircle shape as shown in the example. The screenshot shows a good size and placement for the background graphic.

Figure 3.

Scale your glyph

If your background image did not already contain all the necessary graphics, place your glyph in the centre of the Focal Zone (guides). Elongated elements may exceed the recommended “Focal Zone” by a few pixels. It may be necessary to temporarily group your graphic (Ctrl + g) to scale it proportionally (keep Ctrl + Shift pressed and move the handles of the graphic), but afterwards you should ungroup (Ctrl + Shift + G) the graphic again. Centre the graphic with the help of the Align and Distribute dialogue box, as shown in the screenshot.

Figure 4.

Try to attach as many vector lines and nodes/dots as possible to the pixel grid to achieve a sharp graphic in your exported PNG in the end (with as little unnecessary anti-alias effect as possible). You can use the tool “Edit path by nodes” to drag the nodes to run along the lines of the pixel grid.

Figure 5.

White glyph

If your background image did not already contain all the necessary graphics, set the colour of your glyph graphic to white in the Fill and Stroke dialogue box, as shown in the screenshot. (You can hide the document grid if you don’t need it anymore by pressing the “#” key.)

Figure 6.

Cut the background shape

Unlock the layer DO NOT EDIT - Cut Away Shape by clicking the lock icon in the Layers palette. Activate your background, then press the “Shift” key on your keyboard and also activate the shape on the layer DO NOT EDIT - Cut Away Shape. Select the Difference function from the Path menu in the top menu bar (Ctrl + -). This function will cut the surrounding area of the icon away from your background graphic.

Figure 7.

Create inner shadow

You may need to duplicate the layer DO NOT EDIT - Cut Away Shape via the menu on the Layers palette (activate layer and right-click to see the layers menu) if you need to cut several background layers into the correct shape.

Figure 8.

If you created a glyph above the background, continue reading the chapters regarding the glyph shadows. If your background image did already contain all the necessary graphics, you can now jump to the last section, "Export and save".

Activate the glyph on top of the background and copy it (Ctrl + c). Activate the layer CREATE INNER SHADOW HERE in the Layers palette, and paste the glyph shape in place (Ctrl + Alt + v) onto this layer. The new inner shadow of the glyph is now behind the glyph. You might want to lock the layer PLACE YOUR GRAPHIC HERE by clicking its lock sign in the Layers palette to make sure that you don’t accidentally activate the glyph instead of the shadow in the following steps.

Figure 9.

Set inner shadow opacity

Set the colour of the shadow to black with reduced transparency, as shown in the screenshot below (circled area at the right-hand side). Move the shadow one pixel down by subtracting one pixel from the original “Y” co-ordinates (circled area at the top of the screenshot).

Figure 10.

Apply inner shadow blur

Activate the inner shadow and make sure that it is a simple “Path” object. To create the shadow blur, the inner shadow cannot be a group of objects or a combined object. To ungroup an object, select Object > Ungroup (Shift + Ctrl + G). To break a combined object apart, select Path > Break Apart (Shift + Ctrl + K). To convert a regular shape or text object into a path, select Path > Object to Path (Shift + Ctrl + C) or Stroke to Path (Alt + Ctrl + C). Activate only one object of the inner shadow, and select Inset/Outset Halo from the Extensions > Generate from Path menu. When you insert the data shown in the screenshot below, and then click Apply, Inkscape creates several transparent shadow layers that create the illusion of a blurred shadow.

Figure 11.

Figure 12.

Amend original shadow

Keep the original shadow layer activated and set its opacity to 8, as shown in the screenshot, to finalise the inner shadow. If you can’t activate the original inner shadow below the shadow blur, you can change the order of objects by activating the blur shadow, selecting the “Objects” function from the top menu bar, and reordering the objects by choosing Lower to Bottom. This will move the shadow blur behind the original inner shadow, so that you can easily activate the inner shadow to amend its opacity in the Fill and Stroke dialogue box.

Figure 13.

Figure 14.

Export and save

The icon is now ready, and you can export it as PNG via the File > Export Bitmap (Shift + Ctrl + E) option. Set the Export area to Page and select Browse to define the saving directory and the name of your Series 40 full touch launcher icon. Click Export and close the Export Bitmap dialogue. You should also save the Inkscape SVG in case you want to edit the icon later on.

Figure 15.